<template>
  <div class="order">
    <div class="order_top">
      <div class="order_go_back" @click="go_back"></div>
      <div class="order_menu">
        <!-- <div class="order_my active">我的团队
                       <div class="menu_line"></div>
                   </div>
        <div class="order_team">团队订单</div>-->
        <router-link to="orderMore">
          <img src="/static/picture/order.png" />
        </router-link>
      </div>
    </div>
    <!-- <div class="order_question">
                <div class="question">已经下单，没有看到订单？</div>
                <div class="see">查看》</div>
    </div>-->
    <div class="order_option">
      <ul>
        <li
          :class="{'active':status===index}"
          v-for="(item,index) in type"
          :key="index"
          @click="changeClick(index)"
        >{{item}}</li>
        <div class="clear"></div>
      </ul>
    </div>
    <div class="order_list" id="order-list">
      <ul>
        <li v-for="(item,index) in orderList" :key="index">
          <div class="order_from">
            <div class="source">{{item.order_type_show}}</div>
            <div class="account">{{item.remark}}</div>
          </div>
          <div class="order_sub">
            <div class="order_img">
              <img v-if="item.item_img" :src="item.item_img" />
            </div>
            <div class="order_info">
              <div class="order_num">订单编号：{{item.third_party_no}}</div>
              <div class="order_reality">实付¥ {{item.amount}}</div>
              <div class="order_aword">
                <div class="aword">奖金 {{item.reward_amount}}元</div>
                <div class="stateC" v-if="+item.order_status===3">已失效</div>
                <div class="stateB" v-if="+item.order_status===1">待结算</div>
                <div class="stateA" v-if="+item.order_status===2">已结算</div>
              </div>
              <div class="order_time">下单时间：{{item.pay_time}}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  name: "Order",
  data() {
    return {
      type: ["全部", "待结算", "已结算", "已失效"],
      orderList: [],
      status: 0,
      limit: 10,
      page: 1,
      token: "",
      isSending: false, // 是否正在加载
      isGetMore: true // 是否还有更多
    };
  },
  created() {
    document.title = "我的订单";
    if (localStorage.token) {
      this.token = localStorage.getItem("token");
    }
  },
  mounted() {
    this.getOrderList();
    document.body.addEventListener("touchmove", () => {
      let element = $("#order-list");
      if (!element[0]) {
        return;
      }
      let win = $(window);
      if (
        element.offset().top + element.height() <=
        win.height() + win.scrollTop()
      ) {
        this.getOrderList();
      }
    });
  },
  methods: {
    //返回
    go_back() {
      this.$router.go(-1);
    },
    changeClick(index) {
      this.isSending = false;
      this.isGetMore = true;
      this.status = index;
      this.orderList = [];
      this.page = 1;
      this.getOrderList();
    },
    //订单列表
    getOrderList() {
      var that = this;
      if (this.isSending || !this.isGetMore) {
        return;
      }
      this.isSending = true;
      Indicator.open();
      this.$axios
        .get("/v1/order/orderList", {
          params: {
            status: this.status,
            page: this.page,
            limit: this.limit
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + this.token
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            Indicator.close();
            this.page++;
            that.orderList = that.orderList.concat(res.data.data);
            if (res.data.data.length < this.limit) {
              this.isGetMore = false;
            }
            this.isSending = false;
          } else {
            Toast(res.data.msg);
          }
        });
    }
  }
};
</script>
<style scoped>
.order {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
}
.order_top {
  width: 100%;
  height: 70px;
  background: #f8f8f8;
  padding-top: 30px;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
}
.order_top .order_go_back {
  width: 48px;
  height: 48px;
  background: url(/static/images/team_go_back.png) no-repeat center center;
  background-size: 100% 100%;
  margin-left: 20px;
}
.order_top .order_menu {
  width: 44px;
  height: 44px;
  margin-right: 40px;
}
.order_top .order_menu img {
  width: 100%;
}
.order_top .order_menu .active {
  color: #333333;
  font-weight: 600;
}
.order_menu .active .menu_line {
  width: 68px;
  height: 8px;
  background: #333334;
  border-radius: 4px 0 4px 0;
  margin: 0 auto;
  margin-top: 22px;
}
.order_question {
  width: 698px;
  margin: 0 auto;
  height: 90px;
  line-height: 90px;
  border-bottom: 2px solid #e4e4e4;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.order_question .question {
  color: #4a4a4a;
  font-size: 28px;
  padding-left: 18px;
}
.order_question .see {
  color: #9b9b9b;
  font-size: 28px;
}
.order_option {
  width: 100%;
  height: 80px;
  line-height: 80px;
  background: #fff;
}
.order_option ul {
  width: 662px;
  margin: 0 auto;
}
.order_option li {
  float: left;
  font-size: 28px;
  color: #9b9b9b;
  margin-right: 110px;
  height: 72px;
}
.order_option li:nth-child(4) {
  margin-right: 0;
}
.order_option li.active {
  color: #332a19;
  border-bottom: 8px solid #fad228;
  border-radius: 0px 0px 4px 4px;
}
.order_list ul {
  width: 698px;
  margin: 0 auto;
  margin-bottom: 20px;
  padding-top: 20px;
}
.order_list li {
  width: 100%;
  height: 374px;
  background: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
}
.order_list .order_from {
  width: 632px;
  margin: 0 auto;
  line-height: 90px;
  display: flex;
  justify-content: space-between;
}
.source {
  font-size: 28px;
  color: #000000;
}
.account {
  font-size: 28px;
  color: #fe3b30;
}
.order_list .order_sub {
  width: 632px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.order_sub .order_img {
  width: 224px;
  height: 224px;
}
.order_sub .order_img img {
  width: 100%;
  border-radius: 16px;
}
.order_sub .order_info {
  width: 394px;
  margin-left: 24px;
}
.order_info .order_aword {
  height: 40px;
  line-height: 40px;
  font-size: 28px;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.aword {
  color: #9b9b9b;
}
.stateA {
  color: #2a9dff;
}
.stateB {
  color: #00d5ac;
}
.stateC {
  color: #9b9b9b;
}
.order_info .order_reality {
  color: #9b9b9b;
  font-size: 28px;
  line-height: 60px;
  margin-top: 10px;
}
.order_info .order_num {
  font-size: 28px;
  color: #333334;
  font-weight: bold;
}
.order_info .order_time {
  font-size: 24px;
  color: #9b9b9b;
  margin-top: 12px;
  margin-top: 28px;
}
.order_info .order_nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 30px;
}
.order_nav .nav_wait {
  width: 190px;
  height: 60px;
  border: 2px solid #00d5ac;
  border-radius: 30px;
  line-height: 60px;
  text-align: center;
  font-size: 28px;
  color: #00d5ac;
  margin-right: 18px;
}
.order_nav .nav_del {
  width: 190px;
  height: 60px;
  border: 2px solid #c6c6c6;
  border-radius: 30px;
  line-height: 60px;
  text-align: center;
  font-size: 28px;
  color: #9b9b9b;
}
.order_nav .nav_yet {
  width: 190px;
  height: 60px;
  border: 2px solid #2a9dff;
  border-radius: 30px;
  line-height: 60px;
  text-align: center;
  font-size: 28px;
  color: #2a9dff;
  margin-right: 18px;
}
.order_nav .nav_lose {
  width: 190px;
  height: 60px;
  border: 2px solid #ffb100;
  border-radius: 30px;
  line-height: 60px;
  text-align: center;
  font-size: 28px;
  color: #ffb100;
  margin-right: 18px;
}
</style>